<template>
  <div class="register-pages">
    <div class="register-box" v-show="!showQrcode">
      <div class="register-cnt">
        <div class="title">
          <h1>AW大师</h1>
          <p>全景看房 - AI拓客 - 裂变传播 - 监控意向</p>
          <p>连接客户更简单</p>
        </div>
        <div class="register-form">
          <div class="agent-box" v-show="agentInfo.logo">
            <img :src="agentInfo.logo" alt />
            <span>{{agentInfo.name}}</span> 邀请您加入
          </div>
          <div class="form-cnt">
            <div class="phone">
              <span class="phone-code" @click="seclectCode">
                {{phoneCode}}
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-xialajiantou" />
                </svg>
              </span>
              <input
                type="tel"
                placeholder="请输入手机号码"
                oninput="value=value.replace(/[^0-9]/g,'')"
                maxlength="11"
                v-model.trim="mobile"
                @blur="blur"
              />
            </div>
            <div class="code">
              <div class="code-box">
                <input
                  type="tel"
                  placeholder="请输入验证码"
                  oninput="value=value.replace(/[^0-9]/g,'')"
                  maxlength="6"
                  v-model.trim="verificationCode"
                  @blur="blur"
                />
              </div>

              <div
                class="send-code"
                :class="{'disabled': disabledBtn}"
                @click="sendCode"
              >{{sendCodeText}}</div>
            </div>
            <div class="name">
              <input
                type="text"
                placeholder="请输入你的昵称"
                v-model.trim="name"
                maxlength="16"
                @blur="blur"
              />
            </div>
          </div>
        </div>
        <div class="btn" :class="{'registDisabled': !registDisabled}" @click="nextHandler">立即注册</div>
        <div class="tips">
          <span class="sub">注册代表您同意</span>
          <router-link class="linker" to="/register/agreement?name=AW大师">AW大师注册协议</router-link>
        </div>
      </div>
      <div class="tips-box">
        <h3>我们是AW大师</h3>
        <div class="bottom-line"></div>
        <div class="info-box">
          <div class="item">
            <img src="../../../assets/img/register/regIcon1.png" alt />
            <h5>实拍全景</h5>
            <p>高保真分享不错过任何细节</p>
          </div>
          <div class="item">
            <img src="../../../assets/img/register/regIcon2.png" alt />
            <h5>提高转化率</h5>
            <p>改变传统分享被踢出群的尴尬</p>
          </div>
          <div class="item">
            <img src="../../../assets/img/register/regIcon3.png" alt />
            <h5>实时跟进</h5>
            <p>在合适的时间合适的地点做合适的事</p>
          </div>
          <div class="item">
            <img src="../../../assets/img/register/regIcon4.png" alt />
            <h5>大数据分析</h5>
            <p>分析客户真实购房需求,快速形成用户标签</p>
          </div>
          <div class="item">
            <img src="../../../assets/img/register/regIcon5.png" alt />
            <h5>200万用户</h5>
            <p>与200万AW大师并肩作战</p>
          </div>
          <div class="item">
            <img src="../../../assets/img/register/regIcon6.png" alt />
            <h5>免费试用</h5>
            <p>您与快速成交的工具只差AW大师</p>
          </div>
        </div>
      </div>
      <van-actionsheet
        v-model="phoneShow"
        :actions="actions"
        cancel-text="取消"
        @select="onSelect"
        @cancel="onCancel"
      />
    </div>
    <div class="qrcode-box" v-show="showQrcode">
      <div class="title">
        <div class="logo">
          <img src="../../../assets/img/register/logo.png" alt />
          <h5>AW大师</h5>
        </div>
        <div class="sub">
          <p>全景看房 - AI拓客 - 裂变传播 - 监控意向</p>
          <p>连接客户更简单</p>
        </div>
      </div>
      <div class="qrcode-cnt">
        <img class="qrcode" :src="qrcodeImg" alt />
        <p>长按识别二维码，关注公众号</p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { checkStrLength, checkStrType } from '@/utils/tool'
import RegisterService from 'SERVICE/registService'
export default {
  data() {
    return {
      uuid: '',
      enterpriseId: '',
      registerType: '',
      parentUserId: '',
      agentInfo: {},
      mobile: '',
      verificationCode: '',
      name: '',
      actions: [{ name: '中国大陆 +86', phoneCode: '+86' }, { name: '香港 +852', phoneCode: '+852' }],
      phoneCode: '+86',
      phoneShow: false,
      sendCodeText: '获取验证码',
      disabledBtn: true,
      codeTime: 60,
      registStatus: false,
      showQrcode: false,
      qrcodeImg: ''
    }
  },
  created() {
    this.uuid = this.$route.query.uuid || localStorage.getItem('uuid') || ''
    this.enterpriseId = this.$route.query.enterpriseId || localStorage.getItem('enterpriseId') || ''
    this.registerType = this.$route.query.registerType || localStorage.getItem('registerType') || ''
    this.parentUserId = this.$route.query.parentUserId || localStorage.getItem('parentUserId') || ''
    if (this.parentUserId) {
      this.queryRegisterRecommendInfo()
    }
  },
  watch: {
    mobile() {
      if (this.checkPhone()) {
        this.disabledBtn = false
        // 检测老用户
        this.checkUser()
      } else {
        this.disabledBtn = true
      }
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    registDisabled() {
      return this.checkPhone() && this.verificationCode.length && checkStrLength(this.name, 16) && checkStrType(this.name)
    }
  },
  methods: {
    // 获取邀请人信息
    queryRegisterRecommendInfo() {
      RegisterService.queryRegisterRecommendInfo(this.enterpriseId, '', this.parentUserId, this.uuid)
        .then(res => {
          this.agentInfo = res
        })
        .catch()
    },
    // 检测电话号码
    checkPhone() {
      let reg = /^1[3-9]\d{9}$/g
      let checkMobile = (this.phoneCode == '+86' && reg.test(this.mobile)) || (this.phoneCode == '+852' && this.mobile.length === 8)
      return checkMobile
    },
    // 显示区号选择弹框
    seclectCode() {
      this.phoneShow = true
    },
    // 选择区号
    onSelect(item) {
      this.phoneCode = item.phoneCode
      this.phoneShow = false
      this.disabledBtn = !this.checkPhone()
    },
    // 取消选择区号
    onCancel() {
      this.phoneShow = false
    },
    // 发送验证码
    sendCode() {
      if (!this.disabledBtn) {
        this.disabledBtn = true
        const result = RegisterService.sendMsgRegister({ mobile: this.mobile, areaCode: this.phoneCode, enterpriseId: this.enterpriseId })
        this.countDown()
      } else {
        if (this.sendCodeText.includes('重新发送')) {
          this.$toast('验证码发送过于频繁')
        } else {
          this.$toast('手机号码不正确，请检查')
        }
      }
    },
    // 验证码倒计时
    countDown() {
      this.sendCodeText = '重新发送(' + this.codeTime + 's)'
      let timer = setInterval(() => {
        this.codeTime--
        this.sendCodeText = '重新发送(' + this.codeTime + 's)'
        if (this.codeTime < 0) {
          clearInterval(timer)
          this.sendCodeText = '获取验证码'
          this.codeTime = 60
          this.disabledBtn = false
        }
      }, 1000)
    },
    // 检测老用户
    checkUser() {
      RegisterService.checkMobile({
        uuid: this.uuid,
        mobile: this.mobile,
        areaCode: this.phoneCode,
        enterpriseId: this.enterpriseId
      })
        .then(res => {
          if (res.isOldUser) {
            this.$dialog
              .alert({
                title: '提示',
                message: '您已经是老用户了，请进入公众号使用！',
                confirmButtonText: '进入公众号'
              })
              .then(() => {
                this.getOfficialAccountQrCode()
              })
          }
        })
        .catch()
    },
    // 键盘遮挡
    blur() {
      setTimeout(() => {
        document.activeElement.scrollIntoViewIfNeeded(true)
      }, 100)
    },
    // 检测表单
    nextHandler() {
      // 防止重复提交
      if (this.registStatus) {
        return false
      }
      // 检测字段
      if (this.mobile.length == 0) {
        return this.$toast('请输入手机号码')
      }
      if (!this.checkPhone()) {
        return this.$toast('手机号不正确，请重新输入')
      }
      if (this.verificationCode.length == 0) {
        return this.$toast('请输入验证码')
      }
      if (!checkStrLength(this.name, 16)) {
        return this.$toast('昵称最多8个汉字(或16个字符)')
      }
      if (!checkStrType(this.name)) {
        return this.$toast('昵称只支持中文、英文和数字')
      }
      this.registStatus = true
      this.register()
    },
    // 注册
    async register() {
      let code = sessionStorage.getItem('wxcode') || ''
      let uuid = localStorage.getItem('uuid')
      let enterpriseId = localStorage.getItem('enterpriseId')
      let param = {
        nickName: this.name,
        verificationCode: this.verificationCode,
        mobile: this.mobile,
        areaCode: this.phoneCode,
        code: sessionStorage.getItem('officialAccountOpenId') ? '' : code,
        uuid: uuid,
        enterpriseId: enterpriseId,
        parentUserId: this.parentUserId
      }
      // 公众号获取用户信息
      RegisterService.getUserInfoByCode(param)
        .then(async res => {
          if (res) {
            let user = res.userInfo
            user.cropId = localStorage.getItem('cropId')
            user.userLoginType = res.userLoginType
            user.articleShareFlag = res.articleShareFlag || '0'
            user.token = res.token
            user.jumpToDynamicDetail = res.jumpToDynamicDetail
            await this.$store.dispatch('getUserInfo', user)
            this.getOfficialAccountQrCode()
          } else {
            this.$toast(res.msg)
            this.registStatus = false
          }
        })
        .catch(err => {
          this.registStatus = false
        })
    },
    // 获取微信公众号二维码
    getOfficialAccountQrCode() {
      RegisterService.getOfficialAccountQrCode({ uuid: this.uuid, enterpriseId: this.enterpriseId })
        .then(res => {
          this.qrcodeImg = res.qrCode
          this.showQrcode = true
        })
        .catch()
    }
  }
}
</script>

<style lang="less" scoped>
.register-box {
  font-size: 14px;
  .register-cnt {
    height: 587px;
    background: url('../../../assets/img/register/registerBg.png') no-repeat left top;
    background-size: 100% 587px;
    .title {
      padding: 50px 24px 24px;
      color: #fff;
      h1 {
        font-size: 40px;
      }
      p {
        font-size: 14px;
        line-height: 20px;
        opacity: 0.9;
      }
    }
  }
  .tips {
    margin: 15px 24px;
    color: #fff;
    font-size: 12px;
    .sub {
      opacity: 0.6;
      margin-right: 5px;
    }
    .linker {
      color: #fff;
      font-weight: bold;
    }
  }
  .register-form {
    margin: 0 24px;
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    .agent-box {
      display: flex;
      align-items: center;
      color: #666;
      img {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        margin-right: 8px;
      }
      span {
        font-weight: 600;
        margin-right: 5px;
      }
    }
    .form-cnt {
      .phone,
      .code,
      .name {
        height: 44px;
        margin-top: 20px;
        font-size: 16px;
        color: #445166;
        display: flex;
        align-items: center;
        input {
          flex: 1;
          border: none;
          padding: 0 5px;
          &::placeholder {
            padding-top: 0.12rem;
          }
        }
      }
      .phone,
      .name,
      .code-box {
        // box-shadow: 0px 2px 4px 0px rgba(150, 158, 168, 0.15);
        border: 1px solid rgba(150, 158, 168, 0.2);
      }
      .code-box {
        flex: 1;
        height: 44px;
        display: flex;
        align-items: center;
        max-width: 180px;
        overflow: hidden;
        input {
          max-width: 100%;
        }
      }
      .send-code {
        width: 120px;
        flex-basis: 120px;
        color: #fff;
        background-color: #007ae6;
        height: 44px;
        margin-left: 10px;
        text-align: center;
        line-height: 44px;
        font-size: 14px;
        &.disabled {
          opacity: 0.5;
          background-color: #b6c0cc;
        }
      }
      .phone {
        display: flex;
        align-items: center;
        color: rgba(51, 51, 51, 1);
        font-size: 16px;
        padding-left: 5px;
        .phone-code {
          display: flex;
          align-items: center;
          color: rgba(51, 51, 51, 1);
          font-size: 16px;
          padding-left: 5px;
        }
        .icon {
          width: 12px;
          height: 12px;
          margin-left: 5px;
        }
      }
    }
  }
  .btn {
    margin: 0 24px;
    height: 45px;
    border-radius: 8px;
    border: 0;
    color: #ac2a01;
    font-size: 16px;
    line-height: 45px;
    text-align: center;
    margin-top: 29px;
    background-color: #feb757;
    font-weight: bold;
    &.registDisabled {
      opacity: 0.5;
      color: #fff;
      border: 1px solid #fff;
      background-color: transparent;
    }
  }
  .tips-box {
    h3 {
      text-align: center;
      padding: 30px 0 50px 0;
      font-size: 24px;
      font-weight: 600;
      color: rgba(51, 51, 51, 1);
    }
    .info-box {
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-wrap: wrap;
      padding-bottom: 40px;
      .item {
        width: 40%;
        text-align: center;
        margin-bottom: 24px;
        img {
          width: 48px;
          height: 48px;
        }
        h5 {
          font-weight: 600;
          color: rgba(51, 51, 51, 1);
          line-height: 24px;
        }
        p {
          height: 36px;
          font-size: 12px;
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
          line-height: 18px;
          padding: 0 10%;
        }
      }
    }
  }
}
.qrcode-box {
  font-size: 14px;
  color: #13284d;
  padding: 35px 24px;
  .title {
    .logo {
      display: flex;
      img {
        width: 36px;
        height: 36px;
        margin-right: 12px;
      }
      h5 {
        font-size: 32px;
        font-weight: 500;
        color: rgba(19, 40, 77, 1);
      }
    }
    .sub {
      margin-top: 8px;
      p {
        height: 20px;
        font-size: 14px;
        font-weight: 400;
        color: rgba(19, 40, 77, 1);
        line-height: 20px;
      }
    }
  }
  .qrcode-cnt {
    margin: 60px auto;
    text-align: center;
    .qrcode {
      width: 184px;
      height: 184px;
    }
    p {
      margin-top: 12px;
      font-size: 14px;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      line-height: 20px;
    }
  }
}
</style>